<template>
  <el-container>
    <el-header>
      <div class="logo-title">
        <img class="middle" src="./assets/Logo.png" />
        <span class="middle">不忍筆記</span>
      </div>
      <el-menu
        class="el-menu-cus"
        mode="horizontal"
        background-color="#34373c"
        text-color="#f2f2f2"
        active-text-color="#ffd04b"
        :default-active="this.$route.path"
        router
      >
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/demoThree">Three</el-menu-item>
        <el-menu-item index="/demoCesium">Cesium</el-menu-item>
        <el-menu-item index="/makeapie">做个饼</el-menu-item>
        <el-menu-item index="/contact">联系方式</el-menu-item>
        <el-menu-item index="/friend">友情链接</el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <router-view />
    </el-main>
  </el-container>
</template>

<script>
import "@/font/baizhoushi.css";

export default {};
</script>

<style>
html,
body,
#app,
#app .el-container {
  width: 100%;
  height: 100%;
  margin: 0;
}

.el-header {
  padding: 0 !important;
  background: #34373c;
}

.el-header ul {
  border: 0;
}

.menu-router {
  text-decoration: none;
}

.el-menu-cus {
  background: none !important;
}

.logo-title {
  width: 35vw;
  height: 100%;
  float: left;
  position: relative;
}

.logo-title img {
  left: 25px;
  width: 40px;
  height: 40px;
  border-radius: 20px;
}

.logo-title span {
  left: 80px;
  color: #f2f2f2;
  font-size: 28px;
  font-family: baizhoushi;
}

.middle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.el-main {
  position: relative;
  padding: 0 !important;
  background-color: #ccc;
}

.cesium-widget-credits {
  display: none !important;
}
</style>
